<template>
    <div class="shp">
       <div class="shp_item" v-for="item in list" :key="item.src" @click="getCom">
          <img :src="item.src" :key="item.src">
          <h3 v-text="item.w">
          </h3>
          <div class="shp_w">
              <p>
                  <span class="now" v-text="item.now"></span>
                  <span class="odd" v-text="item.odd"></span>
              </p>
              <p>
                  <span>热卖中</span><span > 剩{{ item.sheng }}件</span>
              </p>
          </div>
       </div>
       <mt-button type="danger" size="large"  @click="getComment">加载更多</mt-button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            list:[{
                src:'https://g-search3.alicdn.com/img/bao/uploaded/i4/i1/3228206295/O1CN01apYS2q1wN9p6K2ipX_!!0-item_pic.jpg_580x580Q90.jpg_.webp',
                w:'【顺丰现货急速发】Apple/苹果 iPhone 11 手机现货 国行正品 苹果11 pro max正品',
                now:'￥9998',
                odd:'￥8999',
                sheng:'89'
            },
            {
                src:'https://g-search2.alicdn.com/img/bao/uploaded/i4/i1/725677994/O1CN015pRySg28vIk6A49w3_!!0-item_pic.jpg_580x580Q90.jpg_.webp',
                w:"Sony索尼手机 Xperia 5 三摄拍照录影4G游戏骁龙855双卡双待智能手机 sony",
                now:'￥3999',
                odd:'￥4599',
                sheng:'368'
            },
            {
                src:'https://g-search3.alicdn.com/img/bao/uploaded/i4/i3/2616970884/O1CN01ygqXXk1IOuiPIv9an_!!0-item_pic.jpg_580x580Q90.jpg_.webp',
                w:"【立减150元】HUAWEI华为Mate 30 Pro 5G版手机麒麟990mate5g",
                now:'￥5499',
                odd:'￥6099',
                sheng:'1002'
            },
            {
                src:'https://g-search1.alicdn.com/img/bao/uploaded/i4/i4/725677994/O1CN01b6nEfu28vIk06rTGU_!!0-item_pic.jpg_580x580Q90.jpg_.webp',
                w:"【立减350元】HUAWEI/华为 P30官方正品手机30倍数字变焦麒麟980",
                now:'￥5899',
                odd:'￥5999',
                sheng:'230'
            },{
                src:'https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i4/51556487/O1CN01vQgDLw1xn5s152mAm_!!0-saturn_solar.jpg_580x580Q90.jpg_.webp',
                w:"【顺丰现货急速发】Apple/苹果 iPhone 11 手机现货 国行正品 苹果11 pro max正品",
                now:'￥2299',
                odd:'￥2599',
                sheng:'566'
            },
            {
                src:'https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/1917047079/O1CN010emE6a22AEKJtPeM3_!!2-item_pic.png_580x580Q90.jpg_.webp',
                w:"【24期免息 现货速发】小米10 5g手机骁龙865 1亿像素智能学生拍照游戏小米官方旗",
                now:'￥9599',
                odd:'￥1099',
                sheng:'200'
            }],
            lists:[
                 {
                src:'https://g-search3.alicdn.com/img/bao/uploaded/i4/i3/2616970884/O1CN01ygqXXk1IOuiPIv9an_!!0-item_pic.jpg_580x580Q90.jpg_.webp',
                w:"【立减150元】HUAWEI华为Mate 30 Pro 5G版手机麒麟990mate5g",
                now:'￥5499',
                odd:'￥6099',
                sheng:'1002'
            },
            {
                src:'https://g-search1.alicdn.com/img/bao/uploaded/i4/i4/725677994/O1CN01b6nEfu28vIk06rTGU_!!0-item_pic.jpg_580x580Q90.jpg_.webp',
                w:"【立减350元】HUAWEI/华为 P30官方正品手机30倍数字变焦麒麟980",
                now:'￥5899',
                odd:'￥5999',
                sheng:'230'
            }
            ]
        }
    },
    methods:{
        getComment(){
            this.list=this.list.concat(this.lists)
        },
        getCom(){
            // 使用JS的形式进行路由导航

            // 注意：一定要区分this.$router和this.$router这两个对象
            // 其中：this.$oute是路由【参数对象】，所有路由中的参数，params，query都属于它
            // 其中：this.$router是一个路由【导航对象】，用它可以方便的使用JS代码，实现路由的前进后退，跳转新的url地址

            // 最简单的 id是参数
            // this.$router.push("/home/shopping/googs"+ id)
            // 2.传递对象
            // this.$router.push({path:"/home/goods"+id})
            // 3.传递命名的路由
            this.$router.push({name:"get"})
        }
    }
}
</script>

<style scoped>
.shp{
    padding:5px;
    display:flex;
    flex-wrap: wrap ;
    justify-content:space-between;
}
.shp_item{
    width:49%;
    border: 1px solid #ccc;
    box-shadow:0 0 6px #ccc;
    margin-bottom: 5px;
    padding:2px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.shp_item img{
    width:100%;
}
.shp_item h3{
    font-size:16px;
}
.now{
    font-size:15px;
    color:red;
}
.odd{
    font-size:12px;
    text-decoration:line-through;
    margin-left:10px;
    
}
.shp_w{
      background-color: #ccc;
      padding:6px;
}
.shp_w p:nth-child(2){
    display: flex;
    justify-content: space-between;
    margin-bottom:0;
}
</style>